<template>
  <div class="demo">
    <div class="demo-title">定制日期单元格</div>
    <div class="demo-content">
      <Space direction="vertical" :size="12">
        <DatePicker v-model:value="value1">
          <template #dateRender="{ current }">
            <div class="ant-picker-cell-inner" :style="getCurrentStyle(current)">
              {{ current.date() }}
            </div>
          </template>
        </DatePicker>
        <DatePicker.RangePicker v-model:value="value2">
          <template #dateRender="{ current }">
            <div class="ant-picker-cell-inner" :style="getCurrentStyle(current)">
              {{ current.date() }}
            </div>
          </template>
        </DatePicker.RangePicker>
      </Space>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import type { CSSProperties } from 'vue';
  import type { Dayjs } from 'dayjs';
  import Space from '@sscd/space';
  import DatePicker from '@sscd/date-picker';
  const value1 = ref<Dayjs>();
  const value2 = ref<[Dayjs, Dayjs]>();
  const getCurrentStyle = (current: Dayjs) => {
    const style: CSSProperties = {};
    if (current.date() === 1) {
      style.border = '1px solid #1890ff';
      style.borderRadius = '50%';
    }
    return style;
  };
</script>
